<template>

  <div class="form-container">
      <el-tabs type="border-card">
        <div>
      <p class="content-tit">
        <span @click="isShow('isShowSingles')" v-if='isShowSingles'>-</span>
        <span @click="isShow('isShowSingles')" v-else>+</span>征订列表
      </p>
      <el-table :data="applyList" ref="userTable" @selection-change="handleSelectionChange" style="width: 100%"
                class='table-common' :highlight-current-row="true" border
                v-show="isShowSingles">
        <el-table-column label="#" checked="selectionData"
                         type="selection"
                         min-width="6%">
        </el-table-column>
        <el-table-column label="序号" type='index' min-width="8%" align="center"></el-table-column>
        <el-table-column prop="certifyApplyId" label="征订批次号" min-width="10%" align="center"></el-table-column>
        <el-table-column prop="certifyApplyName" label="申请人" min-width="8%" align="center"></el-table-column>
        <el-table-column prop="tempCode" label="征订机构" min-width="10%" align="center"></el-table-column>
        <el-table-column prop="state" label="征订单状态" min-width="10%" align="center"></el-table-column>
        <el-table-column prop="applyDate" label="申请时间" min-width="8%" align="center"></el-table-column>
        <el-table-column prop="applyDis" label="征订备注" min-width="16%" align="center"></el-table-column>
        <el-table-column label="操作" min-width="16%" align="center">
          <template slot-scope="scope">
            <el-button type="primary"
                       icon="el-icon-view"
                       @click="dialogTableVisible = true"
                       size="mini">详情
            </el-button>
            <el-dialog title="征订单证列表" :visible.sync="dialogTableVisible" width="86%" :append-to-body="true">
              <el-table :data="certifysList" ref="certifysList" @selection-change="handleSelectionChange"
                        class='table-common' :highlight-current-row="true" border>
                <el-table-column label="#" checked="selectionData"
                                 type="selection"
                                 min-width="6%">
                </el-table-column>
                <el-table-column label="序号" type='index' min-width="8%" align="center"></el-table-column>
                <el-table-column prop="certifyCode" label="单证编码" min-width="8%" align="center"></el-table-column>
                <el-table-column prop="certifyName" label="单证名称" min-width="10%" align="center"></el-table-column>
                <el-table-column prop="certifyEdition" label="单证版本" min-width="6%" align="center"></el-table-column>
                <el-table-column prop="certifyType" label="单证类型" min-width="6%" align="center"></el-table-column>
                <el-table-column prop="certifyOperType" label="单证业务类型" min-width="6%" align="center"></el-table-column>
                <el-table-column prop="certifyStock" label="库存数量" min-width="6%" align="center"></el-table-column>
                <el-table-column prop="certifyPrice" label="单证单价" min-width="6%" align="center"></el-table-column>
                <el-table-column prop="applyNo" label="申请数量" min-width="6%" align="center"></el-table-column>
                <el-table-column prop="updateCertifyApplyNum" label="上级调整数量" min-width="8%"
                                 align="center"></el-table-column>
                <el-table-column prop="applyDate" label="申请时间" min-width="8%" align="center"></el-table-column>
                <el-table-column prop="applyTempCode" label="申请机构" min-width="8%" align="center"></el-table-column>
                <el-table-column prop="TotalPrice" label="总价" min-width="8%" align="center"></el-table-column>
                <el-table-column label="操作" min-width="8%" align="center">
                  <template slot-scope="scope">
                    <el-button type="primary"
                               icon="el-icon-edit-outline"
                               @click="dialogFormVisible = true"
                               size="mini">修改
                    </el-button>
                    <el-dialog title="征订单证修改" :visible.sync="dialogFormVisible" width="80%" :append-to-body="true">
                      <el-form :label-position="labelPosition" label-width="100px" :model="formData">
                        <el-row type="flex" class="row-bg">
                          <el-col :span="8">
                            <el-form-item label="单证编码" size="mini":required="true">
                              <el-input v-model="formData.certifyCode"></el-input>
                            </el-form-item>
                          </el-col>
                          <el-col :span="8">
                            <el-form-item label="单证名称" size="mini":required="true">
                              <el-input v-model="formData.certifyName"></el-input>
                            </el-form-item>
                          </el-col>
                          <el-col :span="8">
                            <el-form-item label="单证版本" size="mini":required="true">
                              <el-input v-model="formData.certifyEdition"></el-input>
                            </el-form-item>
                          </el-col>
                        </el-row>
                        <el-row type="flex" class="row-bg">
                          <el-col :span="8">
                            <el-form-item label="单证业务类型" size="mini":required="true">
                              <el-input v-model="formData.certifyOperType"></el-input>
                            </el-form-item>
                          </el-col>
                          <el-col :span="8">
                            <el-form-item label="单证单价" size="mini":required="true">
                              <el-input v-model="formData.certifyPrice"></el-input>
                            </el-form-item>
                          </el-col>
                          <el-col :span="8">
                            <el-form-item label="库存数量" size="mini":required="true">
                              <el-input v-model="formData.certifyStock"></el-input>
                            </el-form-item>
                          </el-col>
                        </el-row>
                        <el-row type="flex" class="row-bg">
                          <el-col :span="8">
                            <el-form-item label="申请数量" size="mini":required="true">
                              <el-input v-model="formData.applyNo"></el-input>
                            </el-form-item>
                          </el-col>
                          <el-col :span="8">
                            <el-form-item label="上级调整数量" size="mini":required="true">
                              <el-input v-model="formData.updateCertifyApplyNum"></el-input>
                            </el-form-item>
                          </el-col>
                          <el-col :span="8">
                            <el-form-item label="折扣" size="mini":required="true">
                              <el-input v-model="formData.agio"></el-input>
                            </el-form-item>
                          </el-col>
                        </el-row>
                        <el-row type="flex" class="row-bg">
                          <el-col :span="8">
                            <el-form-item label="总价" size="mini":required="true">
                              <el-input v-model="formData.count"></el-input>
                            </el-form-item>
                          </el-col>
                        </el-row>
                      </el-form>
                      <div align="right">
                        <el-button type="primary" @click="dialogFormVisible = false,updatecertify">确定</el-button>
                      </div>
                    </el-dialog>
                  </template>
                </el-table-column>
              </el-table>
              <div class="mar15 " align="right">
                <el-pagination
                  @current-change="handleCurrentChange"
                  :current-page="publicPage.currentPage"
                  :page-size="publicPage.perPage"
                  layout="total, prev, pager, next, jumper"
                  :total="publicPage.totalSize">
                </el-pagination>
              </div>
              <div align="right">
                <el-button type="danger" @click="dialogTableVisible = false,deleted" icon="el-icon-delete">删除
                </el-button>
              </div>
            </el-dialog>
            <el-button type="primary"
                       icon="el-icon-edit-outline"
                       @click="dialogFormVisible1 = true"
                       size="mini">修改
            </el-button>
            <el-dialog title="修改征订信息" :visible.sync="dialogFormVisible1" width="80%" :append-to-body="true">
              <el-form :label-position="labelPosition" label-width="100px" :model="formData1">
                <el-row type="flex" class="row-bg">
                  <el-col :span="8">
                    <el-form-item label="征订申请人" size="mini">
                      <el-input v-model="formData1.certifyApplyName"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="征订机构" size="mini">
                      <el-select v-model="formData1.tempCode" filterable placeholder="请选择征订机构编码">
                        <el-option
                          v-for="item in tempList"
                          :key="item.code"
                          :label="item.codeName"
                          :value="item.code">
                          <span>{{ item.code }}</span> - <span>{{ item.codeName }}</span>
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="申请时间" size="mini">
                      <el-date-picker v-model="formData1.applyDate" type="date" placeholder="请输入申请时间"
                                      :format="'yyyy-MM-dd'"
                                      :value-format="'yyyy-MM-dd'">
                      </el-date-picker>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row type="flex" class="row-bg">
                  <el-col :span="8">
                    <el-form-item label="接收人" size="mini">
                      <el-select v-model="formData1.receiver" filterable placeholder="请选择">
                        <el-option
                          v-for="item in receiveList"
                          :key="item.code"
                          :label="item.codeName"
                          :value="item.code">
                          <span>{{ item.code }}</span> - <span>{{ item.codeName }}</span>
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="接收人电话" size="mini">
                      <el-input v-model="formData1.phone"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row type="flex" class="row-bg">
                  <el-col :span="16">
                    <el-form-item label="征订备注" size="mini">
                      <el-input type="textarea" autosize v-model="formData1.applyDis" max-length="50"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
              <div align="right">
                <el-button type="primary" @click="dialogFormVisible1=false,updatecertifyApply">确定</el-button>
              </div>
            </el-dialog>

          </template>
        </el-table-column>
      </el-table>
      <div class="mar15 " align="right" v-show="isShowSingles">
        <el-pagination
          @current-change="handleCurrentChangeSingle"
          :current-page="selfPage.currentPage"
          :page-size="selfPage.perPage"
          layout="total, prev, pager, next, jumper"
          :total="selfPage.totalSize">
        </el-pagination>
      </div>
      <div align="right">
        <el-button type="primary" @click="">提交</el-button>
      </div>
    </div>
      </el-tabs>
  </div>
</template>

<script>
  export default {
    name: "card-plan-apply-collection",
    data() {
      return {
        isShowSingles: true,
        labelPosition: 'right',
        dialogTableVisible: false,
        dialogFormVisible: false,
        dialogFormVisible1: false,
        certifyTypeList: [{code: '1', codeName: '有价单证'}],
        certifyOperTypeList: [{code: '1', codeName: '契约'}, {code: '2', codeName: '保全'}, {code: '3', codeName: '理赔'}],
        isChecked: [{code: '1', codeName: '是'}, {code: '2', codeName: '否'}],
        checkedTypeList: [{code: '1', codeName: '子公司 => 分公司 => 总公司'}, {code: '2', codeName: '分公司 => 总公司'}, {
          code: '3',
          codeName: '子公司 => 总公司'
        }],
        tempList: [
          {code: '86', codeName: '总部'}, {code: '8601', codeName: '分公司'},
          {code: '860100', codeName: '支公司'},
          {code: '86010000', codeName: '营销部'},
        ],
        receiveList: [],
        formData: {
          certifyCode: '010201',
          certifyName: '补充文件',
          certifyEdition: 202001,
          certifyType: '有价单证',
          certifyOperType: '契约',
          certifyStock: '0',
          certifyPrice: '0.2',
          applyDate: '2020-05-23',
          applyNo: '200',
          applyTempCode: '86010000',
          updateCertifyApplyNum: '150',
          agio: '1',
          count: '30'
        },
        formData1: {
          certifyEdition: 202001,
          certifyApplyId: 'AW20200530',
          certifyApplyName: '张三',
          tempCode: '机构1',
          applyDate: '2020-05-30',
          applyCount: '',
          receiver: '李四',
          phone: '',
          applyDis: ''
        },
        selfPage: {
          currentPage: 1,
          hasMore: true,
          perPage: 10,
          totalPage: 0,
          totalSize: 0
        },
        publicPage: {
          currentPage: 1,
          hasMore: true,
          perPage: 10,
          totalPage: 0,
          totalSize: 0
        },
        applyList: [
          {
            certifyApplyId: 'AW20200530',
            certifyApplyName: '张三',
            certifyEdition: 202001,
            tempCode: '机构1',
            applyDate: '2020-05-30',
            applyDis: ''
          },
        ],
        certifysList: [
          {
            certifyCode: '010201',
            certifyName: '补充文件',
            certifyType: '有价单证',
            certifyEdition: 202001,
            certifyOperType: '契约',
            certifyStock: '0',
            certifyPrice: '0.2',
            applyNo: '200',
            updateCertifyApplyNum: '150',
            applyDate: '2020-05-23',
            applyTempCode: '机构1' ,
            TotalPrice: "30",
          },
          {
            certifyCode: '010202',
            certifyName: '财务补充文件',
            certifyType: '有价单证',
            certifyEdition: 202001,
            certifyOperType: '契约',
            certifyStock: '0',
            certifyPrice: '0.2',
            applyNo: '330',
            updateCertifyApplyNum: '300',
            applyDate: '2020-05-27',
            applyTempCode: '机构1',
            TotalPrice: "60",
          },
        ]
      }
    },
    methods: {
      isShow(val) {
        this[val] = !this[val]
      },
      handleSelectionChange(val) {
        this.selectionData = val;
      },
      handleCurrentChangeSingle(num) {
        this.selfFormData.pageNum = num
      },
      handleCurrentChange(num) {
        this.formData.pageNum = num
      },
      //查询征订
      query() {
      },
      //删除单证
      deleted() {
      },
      //更新单证
      updatecertify() {
      },
      //更新征订
      updatecertifyApply() {
      },
      //
      showCheckedType() {
        if (this.formData.checked === '2') {
          this.showType = false;
          this.$refs.checkedType.style.display = 'none'
        }
        this.showType = true;
        this.$refs.checkedType.style.display = 'block'
      },
    }
  }
</script>

<style scoped>

</style>
